<template>
    <div>
        <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            label-width="70px"
            class="demo-ruleForm"
            size="default"
            status-icon
        >
            <el-form-item label="link" prop="link">
                <el-input v-model="ruleForm.link" placeholder="请输入link" />
            </el-form-item>
            <el-form-item label="alt" prop="alt">
                <el-input v-model="ruleForm.alt" placeholder="请输入图片名称" />
            </el-form-item>
            <el-form-item>
                <el-upload class="avatar-uploader" :http-request="httprequest" :show-file-list="false">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                </el-upload>
            </el-form-item>
             <el-form-item label="imgbase64" prop="img">
                <el-input v-model="ruleForm.img" placeholder="图片自动转为base64" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">点击上传</el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
        

    </div>
</template>

<script>
// 引入图标
import { Plus } from "@element-plus/icons-vue";
import {addSwiper} from '@/api/http.js'

    export default {
        name:'',
        data () {
            return {
                ruleForm:{
                    link:'',
                    alt:'',
                    img:''
                },
                imageUrl:'',
                // 输入正则
               rules: {
                    link: [{ required: true,trigger: "blur" },],
                    alt: [{ required: true,  trigger: "blur" }],
                    base64: [{ required: true, trigger: "blur" }]
                },
                ruleFormRef:null
            }
        },
        components:{
            Plus
        },
        mounted(){
            this.ruleFormRef = this.$refs.ruleFormRef
        },

        methods:{

            // 点击加号
            httprequest(data){
                console.log(data,'固定参数，上传图片后返回数据')
                // 01-判断图片格式是否正确
                let correctType = ['image/jpeg','image/jpg','image/png']
                if(!correctType.includes(data.file.type)){
                    // 格式
                    ElMessage({
                        message: '图片格式不符(jpeg/jpg/png)',
                        type: 'warning',
                    })
                }
                // 02-判断图片的大小是否符合
                if(data.file.size/1024/1024>3){
                    ElMessage({
                        message: '图片大小超过3M',
                        type: 'warning',
                    })
                }
                // 03-图片转为base64格式
                this.getbase64url(data.file).then(res=>{
                    // 将64格式写入框中
                    this.ruleForm.img = res
                })
                // 04-框内显示上传的图片(官网的)
                this.imageUrl = URL.createObjectURL(data.file)
            },



            // 定义把图片转为base64的方法，因为转码是一个异步过程,所以可以使用promise 进行处理
            getbase64url(file) {
                return new Promise((resolve, reject) => {
                    // 写异步代码 => 转码过程
                    let reader = new FileReader() // 创建一个读取器对象
                    let fileresult = '' // 定义读取的结果
                    reader.readAsDataURL(file) // 使用读取器读取文件,以DataURL 格式读取
                    // 监听读取过程, 将读取的结果赋值
                    reader.onload = () => {
                        fileresult = reader.result
                    }
                    //监听读取错误的方法
                    reader.onerror = (err) => {
                        reject(err)
                    }
                    //监听读取结束
                    reader.onloadend = () => {
                        resolve(fileresult)
                    }
                })
            },
            

            // 提交上传
            submitForm(formEl) {
                if (!formEl) return
                formEl.validate((valid) => {
                    if (valid) {//像是一个校验
                        // 调用上传图片的接口
                        addSwiper(this.ruleForm).then(res => {
                            if (res.data.code == 200) {
                                //跳转到轮播图列表
                                this.$router.push('/home/swipermanage/swiperlist')
                            }
                        })
                    } else {
                        return false
                    }
                })
            },



            // 重置
            resetForm(formEl){
                if (!formEl) return
                formEl.resetFields()
            }
        }
    }

</script>

<style scoped lang="scss"> 
    .el-form-item{
        width: 300px;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed var(--el-border-color);
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: var(--el-transition-duration-fast);
    }

    .avatar-uploader .el-upload:hover {
        border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        text-align: center;
    }
    .avatar-uploader .avatar {
        width: 100px;
        height: 1px;
        display: block;
    }
    // /* 如果要修改ui 组件库中的默认的样式,有时候通过!importtant 增加权重并没有效果,可以使用样式穿透 */
    :deep(.avatar-uploader){
        border: 1px dashed black
    }

    .avatar-uploader .avatar {
        width: 260px;
        height: 200px;
        display: block;
    }

</style>